import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";

# Integrating documents with prompt variables

## Overview

This guide takes you through the process of augmenting the "Basic Chat with Prompt and History" example. You'll learn how to embed documents as context into the PromptTemplate component utilizing a WebBaseLoader.

## Interactive Guide

<iframe
  src="https://app.tango.us/app/embed/76578e84-a700-4b3b-a6ef-8a0350472781?iframe=true"
  sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-same-origin"
  security="restricted"
  title="Loading a document into a PromptTemplate variable"
  width="100%"
  height="800px"
  referrerpolicy="strict-origin-when-cross-origin"
  frameborder="0"
  webkitallowfullscreen="webkitallowfullscreen"
  mozallowfullscreen="mozallowfullscreen"
  allowfullscreen="allowfullscreen"
></iframe>

## Step-by-Step Instructions

1. Start by navigating to the "Community Examples" section.

2. Find the "Basic Chat with Prompt and History" example and click on "Fork Example".

3. In the editor, open the "Template" field.

4. Here, introduce the `{context}` variable, placing it somewhere before the "Current conversation:" text.

5. Once done, save your changes by clicking on "Check & Save".

6. Next, open the search bar and type "web".

7. Drag and drop a WebBaseLoader (or any other loader of your choice) onto the canvas.

8. Connect this loader to the `{context}` variable that we just added.

9. In the "Web Page" field, enter "https://docs.langflow.org/how-upload-examples".

10. Now, click on "ConversationBufferMemory".

11. In the "Input Key" field, enter "text" to define the Chat variable.

> **Tip:** When defining more than one variable and using a Memory component, it's crucial to specify which variable should be used to create the conversation history.

12. Click on the "Build" button to implement your changes.

13. Open the chat interface to test your modifications.

14. Try asking something like, "How do I upload examples?"

15. Click on "Display Prompt" to view your template.

16. Now, you can see what the model used as a basis to generate its response.

By following these instructions, you have successfully loaded a document into a PromptTemplate variable, allowing for more enriched and context-aware chat responses. This customization enhances user interaction by integrating relevant document content into the chat flow.
